<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="~{fragments/layout :: head('首页')}"></head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="~{fragments/layout :: navbar}"></nav>
    
    <!-- 页面内容 -->
    <div th:replace="~{fragments/layout :: content(~{::main})}">
        <main>
            <!-- 欢迎横幅 -->
            <div class="bg-light p-5 rounded-lg mb-4">
                <div class="container">
                    <h1 class="display-4">欢迎来到图书馆管理系统</h1>
                    <p class="lead">在这里，您可以浏览图书、借阅图书、归还图书，以及管理您的借阅记录。</p>
                    <hr class="my-4">
                    <p>还没有账号？立即注册成为我们的会员，享受便捷的图书借阅服务。</p>
                    <a class="btn btn-primary btn-lg" th:href="@{/register}" role="button" sec:authorize="!isAuthenticated()">立即注册</a>
                    <a class="btn btn-success btn-lg" th:href="@{/books/list}" role="button">浏览图书</a>
                    <a class="btn btn-info btn-lg" th:href="@{/load-balancer-test}" role="button">负载均衡测试</a>
                    <a class="btn btn-warning btn-lg" th:href="@{/api/feign-test}" role="button">OpenFeign测试</a>
                    <a class="btn btn-danger btn-lg" th:href="@{/books/circuit-breaker}" role="button">熔断器测试</a>
                    <a class="btn btn-dark btn-lg" href="http://localhost:9411" target="_blank" role="button">链路跟踪</a>
                </div>
            </div>
            
            <!-- 最新图书 -->
            <div class="container">
                <h2 class="mb-4">最新上架图书</h2>
                <div class="row row-cols-1 row-cols-md-3 row-cols-lg-5 g-4">
                    <div class="col" th:each="book : ${latestBooks}">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title" th:text="${book.title}">图书标题</h5>
                                <h6 class="card-subtitle mb-2 text-muted" th:text="${book.author}">作者</h6>
                                <p class="card-text text-truncate" th:text="${book.description}">图书描述...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span th:if="${book.availableQuantity > 0}" class="badge bg-success">可借阅</span>
                                    <span th:unless="${book.availableQuantity > 0}" class="badge bg-danger">已借完</span>
                                    <a th:href="@{/books/view/{id}(id=${book.id})}" class="btn btn-sm btn-outline-primary">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4">
                    <a th:href="@{/books/list}" class="btn btn-outline-primary">查看全部图书</a>
                </div>
            </div>
            
            <!-- 图书馆特色服务 -->
            <div class="container mt-5">
                <h2 class="mb-4">我们的服务</h2>
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card text-center h-100">
                            <div class="card-body">
                                <i class="fas fa-book fa-3x text-primary mb-3"></i>
                                <h5 class="card-title">丰富的图书资源</h5>
                                <p class="card-text">我们拥有各类图书，包括文学、历史、科技、艺术等多个领域，满足您的阅读需求。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card text-center h-100">
                            <div class="card-body">
                                <i class="fas fa-laptop fa-3x text-primary mb-3"></i>
                                <h5 class="card-title">在线借阅系统</h5>
                                <p class="card-text">通过我们的在线系统，您可以随时随地查询、预约和借阅图书，方便快捷。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-4">
                        <div class="card text-center h-100">
                            <div class="card-body">
                                <i class="fas fa-user-graduate fa-3x text-primary mb-3"></i>
                                <h5 class="card-title">学习资源支持</h5>
                                <p class="card-text">为学生提供学习资源和学习空间，支持您的学习和研究需求。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer th:replace="~{fragments/layout :: footer}"></footer>
    
    <!-- 脚本 -->
    <div th:replace="~{fragments/layout :: scripts}"></div>
</body>
</html>
